<template>
  <mt-popup :closeOnClickModal="false" v-model="visible" position="bottom" style="width:100%;">
    <div class="toolbar">
       <span class="mint-datetime-action mint-datetime-cancel"
             @click="handleClose">{{ cancelText }}</span>
      <span class="mint-datetime-action mint-datetime-confirm"
            @click="handleFinish">{{ confirmText }}</span>
    </div>
    <div class="popup-body">
      <div class="brands-labels">
        <label v-for="b in labels" class="kinds-labels" :class="{'label-active': isChecked(b.id)}">
          <span class="label-text">{{b.title}}</span>
          <input class="kinds-label-checkbox" :value="{id:b.id,title:b.title}" type="checkbox" v-model="checkedVal"/>
          <img src="../../assets/imgs/icon/selected.png" class="icon"/>
        </label>
      </div>
    </div>
  </mt-popup>
</template>

<script>
  export default {
    name: 'BrandsPopup',
    props: {
      cancelText: {
        type: String,
        default: '取消'
      },
      confirmText: {
        type: String,
        default: '完成'
      },
      labels: Object,
      value: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        visible: false,
        checkedVal: [],
        tempCheckedVal: []
      }
    },
    methods: {
      isChecked(id) {
        for (let item of this.checkedVal) {
          if (item.id === id) {
            return true;
          }
        }
      },
      handleClose() {
        this.visible = false;
        this.checkedVal = this.tempCheckedVal;
        this.$emit('close', this.tempCheckedVal)
      },
      handleFinish() {
        this.visible = false;
        let checked = this.checkedVal;
        this.$emit('complete', checked);
      }
    },
    watch: {
      value(val) {
        if (val) {
          const index = this.$parent.tempTP.index;
          const classIndex = this.$parent.tempTP.class_index;
          const brands = this.$parent.service_types[index].classs[classIndex].brands;
          if (brands) {
            this.checkedVal = brands;
          } else {
            this.checkedVal = [];
          }
          this.tempCheckedVal = this.checkedVal;
        }
        this.visible = val;
      },
      visible(val) {
        this.$emit('input', val);
      }
    }
  }
</script>

<style lang="scss">
  @import "../../assets/css/variables";
  @import "../../assets/css/mixin";

  .toolbar {
    height: 1.00rem;
    border-bottom: solid 1px #eaeaea;
    .mint-datetime-action {
      display: inline-block;
      width: 50%;
      text-align: center;
      line-height: 1.00rem;
      font-size: .3046rem;
      color: #020202;
    }
    .mint-datetime-cancel {
      float: left;
      text-align: left;
      font-size: .28rem;
      padding-left: .26rem;
    }

    .mint-datetime-confirm {
      padding-right: .26rem;
      float: right;
      text-align: right;
      font-size: .28rem;
    }
  }

  .popup-body {
    padding: .35rem .25rem 0;
    max-height: 4.25rem;
    overflow: scroll;
    .brands-labels {
      margin-left: -.20rem;
      margin-right: -.20rem;
      .kinds-labels {
        display: inline-block;
        text-align: center;
        margin-left: .20rem;
        margin-bottom: .30rem;
        position: relative;
        @include wh(2.15rem, 0.66rem);
        border: 1px solid #A3A3A3;
        vertical-align: middle;
        border-radius: 2px;
        .label-text {
          position: relative;
          top: 50%;
          display: block;
          transform: translateY(-50%);
        }
        &.label-active {
          border: 1px solid $themeColor;
        }
        .kinds-label-checkbox {
          display: none;
          &:checked {
            + .icon {
              display: block;
            }
          }
        }
        .icon {
          display: none;
          position: absolute;
          bottom: 0;
          right: -1px;
          @include wh(.38rem, .38rem);
        }
      }
    }
  }
</style>
